<template>
    <div class="permission-fail-wrap">
        <img src="~@/assets/auth/fail.png" alt="暂无权限" class="animate__animated animate__zoomIn">

        <div class="text" v-show="$isNotEmpty(user)" v-class.animated="'animate__animated animate__fadeInDown'" animate-delay=".5">
            <span>{{dateText}}</span>
            <span class="username">【{{user.displayName}}】</span>
            <span>，您没有系统权限，请联系管理员开通权限！</span>
            <span class="button refresh" @click="refreshPermissionHandler">已经分配权限，点击重新获取权限。</span>
	        <span class="button switch" @click="handleLogout">切换账号</span>
        </div>
    </div>
</template>

<script>
    import {WebStorage} from "jboot-env";

    export default {
        $stores: ['user', 'menus'],

        computed: {
            dateText (){
                const now = new Date(), hour = now.getHours();

                if(hour < 6){return '凌晨好';}
                else if (hour < 9){return '早上好';}
                else if (hour < 12){return '上午好';}
                else if (hour < 14){return '中午好';}
                else if (hour < 17){return '下午好';}
                else if (hour < 24){return '晚上好';}
            },
        },

        mounted() {
            if(this.$isNotEmpty(this.menus)){
                this.$jump('/');
            }
        },

        methods: {
            refreshPermissionHandler (){
                this.$changeStore('CLEAR_MENUS');
                this.$changeStore('CLEAR_USER');
                this.$changeStore('CLEAR_BUTTONS');

                this.$jump('/backend');
            },

	        handleLogout (){
		        WebStorage.localMode().delete('card-merchant-front');

		        this.$changeStore('CLEAR_USER');
		        this.$changeStore('CLEAR_MENUS');
		        this.$changeStore('CLEAR_BUTTONS');

		        this.$jump({name: 'login'}, true);
	        }
        }
    }
</script>

<style lang="scss">
    .permission-fail-wrap {
        width: 100%;
        height: 100%;
        text-align: center;
        background-color: #f3f3f3;
        & > img{
            display: inline-block;
            height: 400px;
        }
        & > .text{
            font-size: 14px;
            font-weight: bolder;
            & > span{
                &.username{
                    color: #9a0010;
                }
                &.button{
                    user-select: none;
                    margin: 0 3px;
                    cursor: pointer;
                    text-decoration: underline;
                    &.refresh{
                        color: #19be6b;
                    }
	                &.switch{
		                color: #1e80ff;
	                }
                }
            }
        }
    }
</style>
